<template>
	<view class="manage-page">
		<!-- 顶部导航栏 -->
		<view class="nav-header">
			<view class="nav-content">
				<view class="page-title">
					<text class="title-text">管理中心</text>
					<text class="subtitle-text">统一管理工程项目</text>
				</view>
				<view class="nav-actions">
					<view class="action-btn" @click="refreshData">
						<text class="action-icon">↻</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 切换选项卡 -->
		<view class="tab-container">
			<view class="tab-wrapper">
				<view 
					class="tab-item" 
					:class="{ 'active': currentTab === 'manage' }"
					@click="switchTab('manage')"
				>
					<text class="tab-text">监管工作</text>
				</view>
				<view 
					class="tab-item" 
					:class="{ 'active': currentTab === 'analysis' }"
					@click="switchTab('analysis')"
				>
					<text class="tab-text">数据分析</text>
				</view>
			</view>
		</view>
		
		<!-- 主要内容区域 -->
		<scroll-view class="content-container" scroll-y>
			<!-- 监管工作页面 -->
			<view v-if="currentTab === 'manage'" class="manage-content">
				<!-- 待办事项统计 -->
				<view class="stats-section">
					<view class="section-header">
						<text class="section-title">专项检查</text>
					</view>
					<view class="stats-grid">
						<view class="stat-card" @click="navigateToTodo">
							<view class="stat-icon pending-icon">
								<text class="icon-text">▷</text>
							</view>
							<view class="stat-info">
								<!-- <text class="stat-number">{{todoStats.pending}}</text> -->
								<text class="stat-label">检查模板</text>
							</view>
						</view> 
						
						<view class="stat-card" @click="navigateToDone">
							<view class="stat-icon success-icon">
								<text class="icon-text">✓</text>
							</view>
							<view class="stat-info">
								<!-- <text class="stat-number">{{todoStats.completed}}</text> -->
								<text class="stat-label">专项检查单</text>
							</view>
						</view>
						
						<view class="stat-card">
							<view class="stat-icon info-icon">
								<text class="icon-text">→</text>
							</view>
							<view class="stat-info">
								<!-- <text class="stat-number">{{todoStats.initiated}}</text> -->
								<text class="stat-label">检查单指派</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 功能菜单区域 -->
				<view class="function-section">
					<!-- 监管功能 -->
					<view class="function-group">
						<view class="group-header">
							<text class="group-title">专项工作</text>
						</view>
						<view class="function-grid">
							<view class="function-item" @click="navigateToPatrol('01')">
								<view class="function-icon civilization-icon">
									<text class="icon-text">📷​</text>
								</view>
								<text class="function-title">会议照片</text>
								<text class="function-desc">会议照片</text>
							</view>
							
							<view class="function-item" @click="navigateToPatrol('02')">
								<view class="function-icon safety-icon">
									<text class="icon-text">📃</text>
								</view>
								<text class="function-title">会议文件</text>
								<text class="function-desc">会议文件</text>
							</view>
							
							<view class="function-item" @click="navigateToPatrol('03')">
								<view class="function-icon quality-icon">
									<text class="icon-text">📋</text>
								</view>
								<text class="function-title">工程会议</text>
								<text class="function-desc">工程会议</text>
							</view>
						</view>
					</view>
					
					<!-- 协同功能 -->
					<view class="function-group">
						<view class="group-header">
							<text class="group-title">日常工作</text>
						</view>
						<view class="function-grid columns-2">
							<view class="function-item" @click="showComingSoon('工程日报')">
								<view class="function-icon notice-icon">
									<text class="icon-text">▶</text>
								</view>
								<text class="function-title">工程日报</text>
								<text class="function-desc">发布和查看工程日报</text>
							</view>
							
							<view class="function-item" @click="showComingSoon('文档管理')">
								<view class="function-icon document-icon">
									<text class="icon-text">■</text>
								</view>
								<text class="function-title">系统公告</text>
								<text class="function-desc">系统公告</text>
							</view>
							<view class="function-item" @click="showComingSoon('任务列表')">
								<view class="function-icon document-icon">
									<text class="icon-text">□</text>
								</view>
								<text class="function-title">任务列表</text>
								<text class="function-desc">任务列表</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 数据分析页面 -->
			<view v-if="currentTab === 'analysis'" class="analysis-content">
				<view class="coming-soon">
					<view class="coming-icon">
						<text class="icon-large">▲</text>
					</view>
					<text class="coming-title">数据分析</text>
					<text class="coming-desc">该功能正在紧张开发中，敬请期待...</text>
					<view class="coming-features">
						<view class="feature-item">
							<text class="feature-icon">•</text>
							<text class="feature-text">项目进度统计</text>
						</view>
						<view class="feature-item">
							<text class="feature-icon">•</text>
							<text class="feature-text">质量安全分析</text>
						</view>
						<view class="feature-item">
							<text class="feature-icon">•</text>
							<text class="feature-text">效率指标分析</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { request } from '@/request/index.js'
	import { STORAGE_KEYS, PATROL_TYPES } from '@/constants/index.js'
	import { getStorage, showToast, showLoading, hideLoading } from '@/utils/index.js'

	export default {
		data() {
			return {
				currentTab: 'manage',
				userInfo: {},
				todoStats: {
					pending: 0,
					completed: 0,
					initiated: 0,
					received: 0
				}
			}
		},
		
		onLoad() {
			this.checkUserAuth()
			this.loadUserInfo()
			this.loadTodoStats()
		},
		
		onShow() {
			// 每次显示时刷新数据
			this.loadTodoStats()
		},
		
		onPullDownRefresh() {
			this.refreshData()
		},
		
		methods: {
			/**
			 * 检查用户权限
			 */
			checkUserAuth() {
				const userInfo = getStorage(STORAGE_KEYS.USER_INFO)
				if (!userInfo) {
					showLoading('请先登录')
					setTimeout(() => {
						hideLoading()
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}, 1000)
					return false
				}
				return true
			},
			
			/**
			 * 加载用户信息
			 */
			loadUserInfo() {
				const userInfo = getStorage(STORAGE_KEYS.USER_INFO)
				if (userInfo) {
					this.userInfo = userInfo
				}
			},
			
			/**
			 * 切换选项卡
			 */
			switchTab(tab) {
				this.currentTab = tab
				if (tab === 'analysis') {
					// 可以在这里加载分析数据
					console.log('切换到数据分析')
				}
			},
			
			/**
			 * 加载待办事项统计
			 */
			async loadTodoStats() {
				if (!this.checkUserAuth()) return
				
				try {
					const response = await request({
						url: '/thirdGrid/query/c_patrol2-m_patrol2',
						method: 'POST',
						data: {
							query_chman: (this.userInfo.user && this.userInfo.user.id) || ''
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'cookie': getStorage(STORAGE_KEYS.TOKEN)
						}
					})
					
					if (response.data.success) {
						this.todoStats.pending = response.data.total || 0
						// 其他统计数据可以通过不同的接口获取
						this.todoStats.completed = Math.floor(Math.random() * 20) + 5
						this.todoStats.initiated = Math.floor(Math.random() * 15) + 3
						this.todoStats.received = Math.floor(Math.random() * 10) + 2
					} else {
						// 如果接口失败，使用默认值
						this.todoStats = {
							pending: 0,
							completed: 0,
							initiated: 0,
							received: 0
						}
					}
				} catch (error) {
					console.error('加载统计数据失败:', error)
					// 使用模拟数据
					this.todoStats = {
						pending: Math.floor(Math.random() * 15) + 2,
						completed: Math.floor(Math.random() * 20) + 5,
						initiated: Math.floor(Math.random() * 15) + 3,
						received: Math.floor(Math.random() * 10) + 2
					}
				}
			},
			
			/**
			 * 刷新数据
			 */
			async refreshData() {
				try {
					await this.loadTodoStats()
					showToast('刷新成功', 'success')
				} catch (error) {
					showToast('刷新失败')
				} finally {
					uni.stopPullDownRefresh()
				}
			},
			
			/**
			 * 跳转到待办事项
			 */
			navigateToTodo() {
				uni.navigateTo({
					url: '/pages/todo/todo'
				})
			},
			
			/**
			 * 跳转到已完成事项
			 */
			navigateToDone() {
				uni.navigateTo({
					url: '/pages/done/done'
				})
			},
			
			/**
			 * 跳转到巡查页面
			 */
			navigateToPatrol(ptype) {
				const patrolType = PATROL_TYPES[Object.keys(PATROL_TYPES).find(key => 
					PATROL_TYPES[key].code === ptype
				)]
				
				if (patrolType) {
					uni.navigateTo({
						url: `/pages/cpatrol/cpatrol?ptype=${ptype}`
					})
				} else {
					showToast('功能开发中...')
				}
			},
			
			/**
			 * 显示即将推出提示
			 */
			showComingSoon(featureName) {
				uni.showModal({
					title: '功能开发中',
					content: `${featureName}功能正在紧张开发中，敬请期待后续版本更新。`,
					showCancel: false,
					confirmText: '知道了'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.manage-page {
	min-height: 100vh;
	background: $bg-secondary;
	display: flex;
	flex-direction: column;
}

/* 顶部导航栏 */
.nav-header {
	background: $primary-gradient;
	padding: $spacing-xl $spacing-lg $spacing-lg;
	border-radius: 0 0 $border-radius-xl $border-radius-xl;
	box-shadow: $shadow-base;
}

.nav-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.page-title {
	display: flex;
	flex-direction: column;
	gap: $spacing-xs;
}

.title-text {
	font-size: $font-size-xl;
	font-weight: 600;
	color: $white;
}

.subtitle-text {
	font-size: $font-size-sm;
	color: rgba(255, 255, 255, 0.8);
}

.nav-actions {
	display: flex;
	gap: $spacing-sm;
}

.action-btn {
	width: 64rpx;
	height: 64rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: $border-radius-base;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: $transition-base;
	backdrop-filter: $backdrop-filter;

	&:active {
		background: rgba(255, 255, 255, 0.3);
		transform: scale(0.95);
	}
}

.action-icon {
	font-size: $font-size-lg;
}

/* 切换选项卡 */
.tab-container {
	padding: $spacing-lg;
	padding-bottom: 0;
}

.tab-wrapper {
	background: $white;
	border-radius: $border-radius-lg;
	padding: $spacing-xs;
	display: flex;
	box-shadow: $shadow-sm;
}

.tab-item {
	flex: 1;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: $border-radius-base;
	transition: $transition-base;
	cursor: pointer;

	&.active {
		background: $primary-color;
		box-shadow: $shadow-sm;
		
		.tab-text {
			color: $white;
			font-weight: 500;
		}
	}
}

.tab-text {
	font-size: $font-size-base;
	color: $text-secondary;
	transition: $transition-base;
}

/* 内容区域 */
.content-container {
	flex: 1;
	padding: $spacing-lg;
	padding-top: 0;
}

/* 监管工作内容 */
.manage-content {
	display: flex;
	flex-direction: column;
	gap: $spacing-xl;
}

/* 统计区域 */
.stats-section {
	margin-top: $spacing-lg;
}

.section-header {
	margin-bottom: $spacing-lg;
}

.section-title {
	font-size: $font-size-lg;
	font-weight: 600;
	color: $text-primary;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: $spacing-md;
}

.stat-card {
	background: $white;
	border-radius: $border-radius-lg;
	padding: $spacing-lg;
	display: flex;
	align-items: center;
	gap: $spacing-md;
	box-shadow: $shadow-sm;
	transition: $transition-base;
	cursor: pointer;

	&:active {
		transform: translateY(1rpx);
		box-shadow: $shadow-base;
	}
}

.stat-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: $border-radius-lg;
	display: flex;
	align-items: center;
	justify-content: center;

	&.pending-icon {
		background: rgba(250, 173, 20, 0.1);
		
		.icon-text {
			color: #faad14;
		}
	}

	&.success-icon {
		background: rgba(82, 196, 26, 0.1);
		
		.icon-text {
			color: #52c41a;
		}
	}

	&.info-icon {
		background: rgba(24, 144, 255, 0.1);
		
		.icon-text {
			color: #1890ff;
		}
	}

	&.received-icon {
		background: rgba(114, 46, 209, 0.1);
		
		.icon-text {
			color: #722ed1;
		}
	}
}

.icon-emoji {
	font-size: $font-size-xl;
}

.icon-text {
	font-size: $font-size-xl;
	font-weight: 500;
	color: inherit;
}

.stat-info {
	display: flex;
	flex-direction: column;
	gap: $spacing-xs;
}

.stat-number {
	font-size: $font-size-xxl;
	font-weight: 600;
	color: $primary-color;
}

.stat-label {
	font-size: $font-size-sm;
	color: $text-secondary;
}

/* 功能区域 */
.function-section {
	display: flex;
	flex-direction: column;
	gap: $spacing-xl;
}

.function-group {
	background: $white;
	border-radius: $border-radius-lg;
	padding: $spacing-xl;
	box-shadow: $shadow-sm;
}

.group-header {
	margin-bottom: $spacing-lg;
	padding-bottom: $spacing-md;
	border-bottom: 1rpx solid $border-light;
}

.group-title {
	font-size: $font-size-lg;
	font-weight: 600;
	color: $text-primary;
}

.function-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: $spacing-lg;

	&.columns-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.function-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: $spacing-lg;
	border-radius: $border-radius-lg;
	background: $bg-secondary;
	transition: $transition-base;
	cursor: pointer;
	border: 2rpx solid transparent;

	&:active {
		transform: translateY(1rpx);
		background: $primary-color;
		border-color: $primary-color;
		
		.function-title,
		.function-desc {
			color: $white;
		}
		
		.function-icon {
			background: rgba(255, 255, 255, 0.2);
		}
	}
}

.function-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: $border-radius-lg;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: $spacing-md;
	transition: $transition-base;

	&.civilization-icon {
		background: rgba(24, 144, 255, 0.1);
		
		.icon-text {
			color: #1890ff;
		}
	}

	&.safety-icon {
		background: rgba(82, 196, 26, 0.1);
		
		.icon-text {
			color: #52c41a;
		}
	}

	&.quality-icon {
		background: rgba(250, 173, 20, 0.1);
		
		.icon-text {
			color: #faad14;
		}
	}

	&.device-icon {
		background: rgba(114, 46, 209, 0.1);
		
		.icon-text {
			color: #722ed1;
		}
	}

	&.notice-icon {
		background: rgba(255, 77, 79, 0.1);
		
		.icon-text {
			color: #ff4d4f;
		}
	}

	&.document-icon {
		background: rgba(22, 119, 255, 0.1);
		
		.icon-text {
			color: #1677ff;
		}
	}
}

.function-title {
	font-size: $font-size-base;
	font-weight: 500;
	color: $text-primary;
	margin-bottom: $spacing-xs;
	transition: $transition-base;
}

.function-desc {
	font-size: $font-size-xs;
	color: $text-secondary;
	line-height: 1.4;
	transition: $transition-base;
}

/* 数据分析内容 */
.analysis-content {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 600rpx;
}

.coming-soon {
	text-align: center;
	padding: $spacing-xxl;
	background: $white;
	border-radius: $border-radius-xl;
	box-shadow: $shadow-sm;
	max-width: 600rpx;
	margin: 0 auto;
}

.coming-icon {
	margin-bottom: $spacing-xl;
}

.icon-large {
	font-size: 120rpx;
	opacity: 0.6;
}

.coming-title {
	font-size: $font-size-xl;
	font-weight: 600;
	color: $text-primary;
	margin-bottom: $spacing-md;
	display: block;
}

.coming-desc {
	font-size: $font-size-base;
	color: $text-secondary;
	line-height: 1.6;
	margin-bottom: $spacing-xl;
	display: block;
}

.coming-features {
	display: flex;
	flex-direction: column;
	gap: $spacing-md;
	align-items: flex-start;
	text-align: left;
	padding: $spacing-lg;
	background: $bg-secondary;
	border-radius: $border-radius-lg;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: $spacing-md;
}

.feature-icon {
	font-size: $font-size-lg;
	color: $primary-color;
	font-weight: bold;
}

.feature-text {
	font-size: $font-size-base;
	color: $text-primary;
}
</style>